// 自驾心得页面
<template>
  <div class="self-driving-experience-wrapper">
    <!-- 顶部tarBar -->
    <van-nav-bar
      title="自驾心得"
      left-arrow
      @click-left="$router.back()"
      fixed
      class="animate__animated animate__fadeInDown"
    />
    <!-- 顶部tarBar -->
    <!-- 心得列表 -->
    <div class="scroll-box">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="全部加载完毕"
        @load="onLoad"
      >
        <experience-box v-for="(item,index) in data" :key="index" :data="item"/>
      </van-list>
    </div>
    <!-- 心得列表 -->
  </div>
</template>

<script>
import ExperienceBox from './components/ExperienceBox.vue';
export default {
  components: {ExperienceBox},
  data() {
    return {
      data: [
        {
          avatar: "../../../assets/image/icon.png",
          phone: "198****1640",
          day: "2021-11-04",
          time: "18:22",
          address: "乌鲁木齐",
          score: "5.0",
          message:
            "车况非常棒，因为快下雪了店家免费给了一个SUV，说了是新买几个月的，送车的小师傅很准时，服务也很到位，专门说了行车安全的问题，提醒了不要超速，取车时也很愉快。",
          img: [
            "https://imgoss.wkzuche.com/order_comment/2021/1104/cfc7ee46-af12-4ed3-952f-dc8a5c9cfd79.jpg?x-oss-process=image/resize,m_lfit,w_1000",
            "https://imgoss.wkzuche.com/order_comment/2021/1104/41a9c6bc-db96-4562-a8ea-9bda6f8b269e.jpg?x-oss-process=image/resize,m_lfit,w_1000",
            "https://imgoss.wkzuche.com/order_comment/2021/1104/86631748-ce91-4162-8db0-7856fa290d88.jpg?x-oss-process=image/resize,m_lfit,w_1000",
          ],
          goodsNum: 5,
        },
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.data.push(this.data[0])
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.data.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  created() {
    for (let i = 0; i < 9; i++) {
      this.data.push(this.data[0]);
    }
  },
};
</script>

<style lang="scss" scoped>
.self-driving-experience-wrapper {
  .scroll-box {
    width: 100%;
    height: 621px;
    margin-top: 46px;
    overflow-y: scroll;
  }
}
</style>